<template>
  <div id="specialty">专业信息管理
    <el-card>
      <!-- 标题 -->
        <!-- 管理用户列表 -->
          <el-menu
            :default-active="activeIndex"
            router
            mode="horizontal"
            class="el-menu-demo"
          >
          <el-menu-item index="/specialty">专业列表</el-menu-item>
          </el-menu>
        <div class="buttonWrap">
          <el-button size="large">批量导入</el-button>
          <el-button size="large" @click="getAddInfo">新增</el-button>
        </div>
      <!-- 查询 -->
      <div class="queryWrap">
        <el-form :model="queryForm" label-position="right" :rules="findRules">
          <el-row :gutter="24">
            <el-col :span="20">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item prop="majorName" label="专业名称：">
                    <el-input type="text" v-model="queryForm.majorName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="majorSort" label="专业所属类别：">
                    <el-input v-model="queryForm.majorSort"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="enrollBatch" label="录取批次：">

                    <el-select v-model="queryForm.enrollBatch" placeholder="请选择">
                      <el-option label="本科" value="本科" />
                      <el-option label="专科" value="专科" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4" class="queryButton">
                <el-button size="large" @click="getFindInfo">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <el-table class="tableInfo" :data="addTableData" ref="multipleTableRef"
        :header-cell-style="{ 'text-align': 'center' }" 
        @selection-change="handleSelectionChange"
        :cell-style="{ 'text-align': 'center' }">
        <el-table-column type="selection" />
        <el-table-column property="Mname" label="专业名称"></el-table-column>
        <el-table-column property="categroy" label="专业所属类别"></el-table-column>
        <el-table-column property="batch" label="录取批次"></el-table-column>
        <el-table-column property="Mnum" label="开设院校数量"></el-table-column>
        <el-table-column property="Msalary" label="就业平均薪资"></el-table-column>
        <el-table-column property="graduate" label="毕业生人数"></el-table-column>
        <el-table-column label="详情">
          <template #default="scope">
            <el-button class="success" @click="getCheckInfo(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" @click="getEditInfo(scope.row)">编辑</el-button>
            <el-button type="danger" @click="getDelInfo(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
       <!-- 批量删除 分页-->
      <div class="allDelWrap">
        <el-button class="allDelBtn" text @click="getAllDel"
          >批量删除</el-button
        >
      </div>
      <el-pagination 
        background 
        layout="prev, pager, next" 
        :total="10" 
      />
    </el-card>
    <!-- 新增按钮对话框开始 -->
    <el-dialog v-model="addSpeDialogVisible" width="70%" :center="true">
      <el-form ref="addForms" :rules="addSpecialtyRules" :model="addForm" class="addDialogWrap" label-position="right" label-width="140px"
        style="max-width: 800px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="addMajorName" label="专业名称：">
              <el-input v-model="addForm.addMajorName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="addCode" label="专业代码：">
              <el-input v-model.number="addForm.addCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="addBantch" label="所属批次：">
              <el-select v-model="addForm.addBantch" placeholder="请选择">
                      <el-option label="本科" value="本科" />
                      <el-option label="专科" value="专科" />
              </el-select>
              <!-- <el-input v-model="addForm.addBantch"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="addBelog" label="专业所属类别：">
              <el-input v-model="addForm.addBelog"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="addSchoolNum" label="开设院校数量：">
              <el-input v-model.number="addForm.addSchoolNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="addAverageWage" label="就业平均薪资：">
              <el-input v-model.number="addForm.addAverageWage"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="addStudentsNum" label="毕业生人数：">
              <el-input v-model.number="addForm.addStudentsNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="addProportion" label="男女比例：">
              <el-input v-model="addForm.addProportion"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="专业评分/满意度：" prop="addAssess">
              <el-input v-model="addForm.addAssess"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12"><el-form-item></el-form-item></el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="就业方向：" prop="addDirection">
              <el-tag v-for="tag in addTagArr.list" :key="tag" style="margin-right:10px;" class="mx-1" closable :disable-transitions="false"
                @close="handleAddClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input v-if="addInputVisible" ref="addInputRef" v-model.trim="addInputValue" class="ml-1 w-20" size="small"
                 @change="handleAddInputConfirm" style="width:100px;" />
              <el-button v-else class="button-new-tag ml-1" style="margin-left:10px;" size="small"
                @click="addShowTag">
                +
              </el-button>
              <!-- <el-input class="averageWage" v-model="addForm.addDirection"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="专业简介：" prop="addProduce">
          <!-- 输入文本 -->
          <el-input type="textarea" resize="none" v-model="addForm.addProduce" maxlength="1000" placeholder="请输入内容"
            rows="10" style="width:454px" show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button size="large" @click="closeAddInfo">取消</el-button>
          <el-button size="large" type="primary" @click="confirmAddInfo">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 新增按钮对话框结束 -->
    <!-- 查看专业列表数据对话框开始 -->
    <el-dialog v-model="checkSpeDialogVisible" width="70%" title="用户详细信息" :center="true">
      <el-form ref="checkForms" :model="checkForm" class="addDialogWrap" label-position="right"
        label-width="140px" style="max-width: 800px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="checkMajorName" label="专业名称：">
              <p>{{checkForm.checkMajorName}}</p>
              <!-- <el-input v-model="checkForm.checkMajorName"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="checkCode" label="专业代码：">
             <p>{{checkForm.checkCode}}</p>
             <!-- <el-input v-model="checkForm.checkCode"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="checkBantch" label="所属批次：">
              <p>{{checkForm.checkBantch}}</p>
              <!-- <el-input v-model="checkForm.checkBantch"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="checkBelog" label="专业所属类别：">
              <p>{{checkForm.checkBelog}}</p>
              <!-- <el-input v-model="checkForm.checkBelog"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="checkSchoolNum" label="开设院校数量：">
              <p>{{checkForm.checkSchoolNum}}</p>
              <!-- <el-input v-model="checkForm.checkSchoolNum"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="checkAverageWage" label="就业平均薪资：">
              <p>{{checkForm.checkAverageWage}}</p>
              <!-- <el-input v-model="checkForm.checkAverageWage"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="checkStudentsNum" label="毕业生人数：">
              <p>{{checkForm.checkStudentsNum}}</p>
              <!-- <el-input v-model="checkForm.checkStudentsNum"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="checkProportion" label="男女比例：">
              <p>{{checkForm.checkProportion}}</p>
              <!-- <el-input v-model="checkForm.checkProportion"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="专业评分/满意度：" prop="checkAssess">
              <p>{{checkForm.checkAssess}}</p>
              <!-- <el-input v-model="checkForm.checkAssess"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="9">
            <el-form-item label="就业方向：" prop="checkDirection">
              <el-tag v-for="tag in idArray.value" :key="tag" style="margin-right:10px;" class="mx-1" :disable-transitions="false">
                {{ tag }}
              </el-tag>
              <!-- <el-input class="averageWage" v-model="checkForm.checkDirection"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="专业简介：" prop="checkProduce">
          <p>{{checkForm.checkProduce}}</p>
          <!-- 输入文本 -->
          <!-- <el-input type="textarea" resize="none" v-model="checkForm.checkProduce" maxlength="1000" placeholder="请输入内容"
            rows="10" style="width:454px" show-word-limit>
          </el-input> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button size="large" type="primary" @click="checkSpeDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 查看专业列表数据对话框结束 -->
    <!-- 编辑按钮对话框开始 -->
    <el-dialog v-model="editSpeDialogVisible" width="70%" :center="true">
      <el-form ref="editForms" :model="editForm" class="editDialogWrap" label-position="right" label-width="140px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="Mname" label="专业名称：">
              <el-input v-model="editForm.Mname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="Mcode" label="专业代码：">
              <el-input v-model.number="editForm.Mcode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="batch" label="所属批次：">
              <el-select v-model="editForm.batch" placeholder="请选择">
                <el-option label="本科" value="本科" />
                <el-option label="专科" value="专科" />
              </el-select>
              <!-- <el-input v-model="editForm.batch"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="categroy" label="专业所属类别：">
              <el-input v-model="editForm.categroy"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="Mnum" label="开设院校数量：">
              <el-input v-model.number="editForm.Mnum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="Msalary" label="就业平均薪资：">
              <el-input v-model.number="editForm.Msalary"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="graduate" label="毕业生人数：">
              <el-input v-model.number="editForm.graduate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="proportion" label="男女比例：">
              <el-input v-model="editForm.proportion"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="专业评分/满意度：" prop="Satisfaction">
              <el-input v-model="editForm.Satisfaction"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12"><el-form-item></el-form-item></el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="就业方向：" >
              <el-tag v-for="tag in idArray.value" :key="tag" style="margin-right:10px;" class="mx-1" closable :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input v-if="inputVisible" ref="InputRef" v-model.trim="inputValue" class="ml-1 w-20" size="small"
                 @change="handleInputConfirm" style="width:100px;" />
              <el-button v-else class="button-new-tag ml-1" style="margin-left:10px;" size="small"
                @click="showTag">
                +
              </el-button>
              <!-- <el-input class="averageWage" v-model="addForm.addDirection"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="专业简介：" prop="introduce">
          <!-- 输入文本 -->
          <el-input type="textarea" resize="none" v-model="editForm.introduce" maxlength="1000" placeholder="请输入内容"
            rows="10" style="width:454px" show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialogFooter">
          <el-button size="large" @click="editSpeDialogVisible = false">取消</el-button>
          <el-button size="large" type="primary" @click="confirmEditInfo">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑按钮对话框结束 -->
  </div>
</template>

<script>

import { ref, reactive, toRefs ,nextTick, toRaw } from 'vue'
import { specialtyList, findInfo, addInfo, delInfo, editInfo ,idFindInfo} from '../api/axiosPlus.js';

export default {
  name: '',
  components: {},
  setup() {
    
    const addSpecialtyRules = reactive({
      addMajorName: [{required: true, message: '专业名称不能为空',trigger: 'blur'}],
      addCode: [{required: true, message: '专业代码不能为空',trigger: 'blur'}],
      addBantch:[{required : true, message: '所属批次不能为空', trigger: 'change'}],
      

    })
    const findRules = reactive({
      majorName: [{required: true, message: '专业名不能为空',trigger: 'blur'}],
      majorSort: [{required: true, message: '专业所属类别不能为空',trigger: 'blur'}],
      enrollBatch: [{required : true, message: '所属批次不能为空', trigger: 'change'}]
    })
    const activeIndex = ref('/specialty')
    const addTagArr = reactive({list:[]})
    const addInputRef = ref()
    const addInputValue = ref('')
    const idArray = reactive([])
    const InputRef = ref()
    const inputValue = ref('')
    // const dynamicTags = reactive({ tags: [] })
    const addInputVisible = ref(false)
    const inputVisible = ref(false)
    const activeName = ref('first')
    // 新增对话框 表单接节点
    const addForms = ref()
    // const checkForms = ref()
    // const editForms = ref()
    const data = reactive({
      // 编辑专业信息 对话框显示状态
      editSpeDialogVisible: false,
      // 编辑对话框初始数据
      editForm: {},
      // 查看专业信息 对话框显示状态
      checkSpeDialogVisible: false,
      // 查看对话框初始数据
      checkForm: {
        checkMajorName: '',
        checkCode: '',
        checkBantch: '',
        checkBelog: '',
        checkSchoolNum: '',
        checkAverageWage: '',
        checkStudentsNum: '',
        checkProportion: '',
        checkAssess: '',
        checkDirection: '',
        checkProduce: ''
      },
      // 新增专业信息 对话框显示状态
      addSpeDialogVisible: false,
      // 新增对话框初始数据
      addForm: {
        addMajorName: '',
        addCode: '',
        addBantch: '',
        addBelog: '',
        addSchoolNum: '',
        addAverageWage: '',
        addStudentsNum: '',
        addProportion: '',
        addAssess: '',
        addDirection: '',
        addProduce: ''
      },
      notes: '',
      queryForm: {
        majorName: '',
        majorSort: '',
        enrollBatch: ''
      },
      // 表格数据
      addTableData: ''
    })

    // 点击新增专业中的确认按钮
    const confirmAddInfo = async () => {
    //  将表单的值提交到数据库中
      let arr = {
        Mname: data.addForm.addMajorName,
        Mcode: data.addForm.addCode,
        batch: data.addForm.addBantch,
        categroy: data.addForm.addBelog,
        Mnum: data.addForm.addSchoolNum,
        Msalary: data.addForm.addAverageWage,
        graduate: data.addForm.addStudentsNum,
        proportion: data.addForm.addProportion,
        Satisfaction: data.addForm.addAssess,
        direction: addTagArr.list.join(','),
        introduce: data.addForm.addProduce,
      }
      console.log(arr);
      let res = await addInfo(arr)

      // console.log(res);
      //如果status==200 弹框提示新增成功
      if (res.status == 200) {

        getSpeciltyList()
        ElMessage({
          type: 'success',
          message: res.message,
          duration: 2000,
        })
        // console.log(res.data);
      } else {
        ElMessage({
          type: 'error',
          message: res.message,
          duration: 2000,
        })
      }
      // 对话框关闭
      data.addSpeDialogVisible = false
      // 获取节点 表单 清空
      addForms.value.resetFields()
    }
    // 点击新增专业中的取消按钮
    const closeAddInfo = () => {
      // 对话框关闭
      data.addSpeDialogVisible = false
      // 获取节点 表单 清空
      addForms.value.resetFields()
    }
    //获取专业列表数据
    const getSpeciltyList = async () => {
      // 获取总条数
      let pamas = {
        params: {
          pagenum: 1,
          pagesize: 10
        }
      }
      let res = await specialtyList(pamas)
      // console.log(res);
      data.addTableData = res.result
      // console.log(data.addTableData)
    }

    // 点击按钮 新增专业
    const getAddInfo = async () => {
      data.addSpeDialogVisible = true

    }
     // 批量删除数据
    const tableList = [] 
    let tableSelect = []
    // 选中的数据
    const handleSelectionChange = (val) => {
      // console.log(val);
      tableSelect = toRaw(tableList)
      tableSelect = val.map(v => v.M_id)
      // console.log(v);
      // console.log(tableSelect.length); 
      // console.log(tableSelect);

    }
   
    // 批量删除
    const getAllDel = () => {
      
      const delArr = tableSelect.join(',')
      console.log(delArr);
      if(tableSelect.length == 0){
        ElMessage({
          message: '请选择需要删除的数据',
          type: 'warning'
        })
      }else{
        ElMessageBox.confirm(
        '确认删除这'+tableSelect.length+'条数据吗?',
        '温馨提示：',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then ( async () => {
          let pamas = {
            params: {
              id: delArr
            }
          }
          const res = await delInfo(pamas)
          console.log(res);
          if (res.status == 201) {
          ElMessage({
            type: 'success',
            message: '删除成功',
            duration: 1000,
          })
        }
          // 更新页面表格数据
          getSpeciltyList()
        }).catch(() => {
          ElMessage({
          type: 'warning',
          message: '已取消删除！',
          duration: 1000,
        })
        } )

      }
    //  console.log(e);

    }
    //点击按钮 删除
    const getDelInfo = (e) => {
      ElMessageBox.confirm(
        '确认删除这条数据吗?',
        '温馨提示：',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then( async () => {
        let pamas = {
          params: {
            id: e.M_id
          }
        }
        const res = await delInfo(pamas)
        // console.log(res)
        if (res.status == 201) {
          ElMessage({
            type: 'success',
            message: res.message,
            duration: 1000,
          })
        }
        // 更新页面表格数据
        getSpeciltyList()
      }).catch(() => {
        ElMessage({
          type: 'warning',
          message: '已取消删除！',
          duration: 1000,
        })
      })
    }
    // 点击按钮 查看
    const getCheckInfo = async (e) => {
      console.log(e);
       let pamas = {
        params:{
        id:e.M_id
        }
      }
      // id查询
      const res = await idFindInfo(pamas)
      // console.log(res);
      data.checkForm = res.data[0]
      idArray.value=res.data[0].direction.split(',')
      
      data.checkSpeDialogVisible = true
      data.checkForm.checkMajorName = e.Mname
      data.checkForm.checkCode = e.Mcode
      data.checkForm.checkBantch = e.batch
      data.checkForm.checkBelog = e.categroy
      data.checkForm.checkSchoolNum = e.Mnum
      data.checkForm.checkAverageWage = e.Msalary
      data.checkForm.checkStudentsNum = e.graduate
      data.checkForm.checkProportion = e.proportion
      data.checkForm.checkAssess = e.Satisfaction
      data.checkForm.checkDirection = e.direction
      data.checkForm.checkProduce = e.introduce

    }
    // 点击编辑中的确认按钮
    const confirmEditInfo = async () => {
      data.editSpeDialogVisible = false
      console.log(data.editForm);
       let arr = {
        id: data.editForm.M_id, 					// id
        Mname: data.editForm.Mname,		//专业名称
        Mcode: data.editForm.Mcode,				//专业代码
        batch: data.editForm.batch,				//所属批次
        categroy: data.editForm.categroy,		//专业所属类别
        Mnum: data.editForm.Mnum,					//开设院校数量
        Msalary: data.editForm.Msalary,			//就业平均薪资
        graduate: data.editForm.graduate,			//毕业生人数
        proportion: data.editForm.proportion,		//男女比例
        Satisfaction: data.editForm.Satisfaction,		//专业评分/满意度
        direction: idArray.value.join(','),		//就业方向
        introduce: data.editForm.introduce		//专业简介
       }
      //  判断是否有内容被修改
      console.log(666);
        console.log(arr);
        let res = await editInfo(arr)
        console.log(res);
        if( res.status == 200 ) {
          getSpeciltyList()
          ElMessage({
          showClose: true,
          message: '修改成功！',
          type: 'success',
          duration: 2000,
        })
      }else {
        ElMessage({
          type: 'error',
          message: res.message,
          duration: 2000,
        })
      }
    }
    // 点击按钮 编辑
    const getEditInfo = async(e) => {
      console.log(e.M_id)
      let pamas = {
        params:{
        id:e.M_id
        }
      }
      // id查询
       const res = await idFindInfo(pamas)
       console.log(res);
        data.editForm = res.data[0]
      //  console.log(data.editForm)
      //  console.log(a.data[0].direction.split(','))
       idArray.value=res.data[0].direction.split(',')
      //  console.log(idArray.value)
      data.editSpeDialogVisible = true
    }
    // 点击按钮 模糊查询
    const getFindInfo = async () => {
      let arr = {
        Mname: data.queryForm.majorName,
        categroy: data.queryForm.majorSort,
        batch: data.queryForm.enrollBatch,
      }
      
      // console.log(arr);
      let res = await findInfo(arr)
      
      // console.log(res);
      data.addTableData = res.data
      // console.log(data.addTableData);
    }
    // 新增对话框中的tag标签事件
    const handleAddClose = (tag) => {
      addTagArr.list.splice(addTagArr.list.indexOf(tag),1)
    }
    // 新增对话框中的tag标签change事件
    const handleAddInputConfirm = () => {
      if(addInputValue){
        console.log(addTagArr.list);
        console.log(addInputValue.value);
        console.log(typeof(addTagArr.list));

        addTagArr.list.push(addInputValue.value)
         console.log(addTagArr.list);
      }
      addInputVisible.value = false
      addInputValue = ''
    }
    // 编辑对话框中的tag标签事件
    const handleClose = (tag) => {
      idArray.value.splice(idArray.value.indexOf(tag), 1)
    }
    // 编辑对话框中的tag标签change事件
    const handleInputConfirm = () => {
      if (inputValue) {
        idArray.value.push(inputValue.value)
        // console.log(inputValue.value)
        // console.log(dynamicTags.tags[1])
        // console.log(inputValue.value)

      }
      inputVisible.value = false
      // console.log(inputVisible);
      inputValue.value = ''
    }
    // 新增对话框点击button显示input框
    const addShowTag = () => {
      addInputVisible.value = true
           nextTick(()=>{
            console.log('111')
            addInputRef.value.focus()
           })
    }
    // 点击button显示input框
    const showTag = () =>{
           inputVisible.value = true
           nextTick(()=>{
            console.log('进入')
            InputRef.value.focus()
           })
    }
    return {
      ...toRefs(data),
      activeIndex,
      findRules,
      addSpecialtyRules,
      tableList,
      tableSelect,
      getAllDel,
      handleSelectionChange,
      getAddInfo,
      getDelInfo,
      getCheckInfo,
      getEditInfo,
      getFindInfo,
      confirmAddInfo,
      closeAddInfo,
      confirmEditInfo,
      addForms,
      activeName,
      getSpeciltyList,
      inputValue,
      // dynamicTags,
      inputVisible,
      showTag,
      handleClose,
      handleInputConfirm,
      InputRef,
      // showInput,
      idArray,
      addInputVisible,
      addTagArr,
      handleAddClose,
      addInputRef,
      addInputValue,
      handleAddInputConfirm,
      addShowTag,
    }
  },
  created() {
    this.getSpeciltyList()
  }
}
</script>

<style lang="less" scoped>
.el-menu {
  border-bottom: 0px;
  width: 300px;
}
.el-menu-item {
  border-bottom: 2px solid #666;
  line-height: 40px;
  margin-left: 0px;
  margin-right: 5px;
}
#specialty {
  .el-card {
    .tableInfo {
      margin-top: 10px;
      border: 1px solid #C4C7CB;
      .success {
        color: #fff;
        background-color: #27B148;
      }
    }


      .buttonWrap {
        display: flex;
        justify-content: flex-end;
        margin-top:-40px;
        .el-button {
          color: #fff;
          background-color: #1EB96B;
          font-size: 14px;
          margin-left: 24px;
          width: 120px;
        }

        // .el-button :hover{

        // }
      }


    // }

    // 查询
    .queryWrap {
      .el-form {
        margin-top: 41px;
        font-size: 16px;
        font-weight: 600;

        .el-form-item {

          .el-input {
            width: 120px;
            height: 35px;
            border-radius: 8px;

          }

          .el-select {
            width: 120px;
            height: 35px;
            border-radius: 8px;
          }

        }

        .queryButton {
          display: flex;
          justify-content: flex-end;

          .el-button {
            color: #fff;
            background-color: #27B148;
            width: 80px;
            height: 30px;
            font-size: 14px;
          }
        }
      }
    }
    // 批量删除
  .allDelWrap {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
  }
    // 分页器
    .el-pagination {
      margin-top: 10px;
      justify-content: center;
    }
  }

  .dialogFooter {
    .el-button {
      margin: 0 20px
    }
  }

  // 表格信息
  .tableInfo {
    margin-top: 38px;
    border: 1px solid #C4C7CB;

  }

  // 新增按钮
  // .addDialogWrap {
  //   }
}

/deep/.el-textarea__inner {
  width: 454px;
  height: 144px;
}

/deep/.el-table th.el-table__cell.is-leaf {
  background: #E6F1FF;
}

/deep/.el-pagination.is-background .btn-next,
/deep/.el-pagination.is-background .btn-prev,
/deep/.el-pagination.is-background .el-pager .number {
  border: 1px solid #E8E8E8;
  background: #fff;
}

/deep/.el-pagination {
  justify-content: center;
}

/deep/.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background: #fff;
  color: #4C555D;
  font-weight: 500;
  border: 1px solid #1684FC;
}

/deep/.el-pager li.btn-quicknext,
/deep/.el-pager li.btn-quickprev {
  border: 1px solid #E8E8E8;
  background: #fff;
}
</style>